<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				@clickRight="showSetUp"
				color="#FDFDFD"
				:border="false"
				:shadow="false"
				background-color="#CD001B"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<!-- 		<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view> -->
				<view slot="right"><uni-icons type="bars" color="#FDFDFD" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ marginTop: topBar }">
			<!-- 标题 -->
			<view class="titleBox">
				<view class="titleBoxcenter">
					<text>{{ i18n.ctwfont1 }}</text>
				</view>
			</view>
			<!-- style="padding-left: 30px;" -->
			<uni-forms :v-model="expressForm" ref="form" v-if="langShow" :rules="rules" validateTrigger="bind">
				<!-- 订单信息 -->
				<view class="formTitleBox">{{ i18n.ctwfont2 }}</view>
				<!-- 客代号 -->
				<uni-forms-item :label="i18n.ctwfont36" :labelWidth="95" required name="customerCode" class="formItemBox">
					<hpy-form-select :dataList="CustomerCode" text="text" name="value" :title="i18n.ctwfont46" @change="CustomerCodeChange" v-model="expressForm.customerCode" />
				</uni-forms-item>
				<!-- 第三客代号 -->
				<uni-forms-item v-if="CustomerCodeTwoShow" :label="this.$t('orderDetails.ctwfont7')" name="CustomerCodeTwo" :labelWidth="95" class="formItemBox">
					<hpy-form-select
						:dataList="CustomerCodeTwo"
						text="text"
						name="value"
						:title="i18n.ctwfont46"
						@change="CustomerCodeTwoChange"
						v-model="expressForm.CustomerCodeTwo"
					/>
				</uni-forms-item>
				<!-- 仓库地址 -->
				<uni-forms-item :label="i18n.ctwfont3" :labelWidth="95" required name="deliveryAddress" class="formItemBox">
					<hpy-form-select
						:dataList="columns"
						:text="deliveryText"
						name="e3Number"
						:title="i18n.ctwfont46"
						@change="bindPickerChange"
						v-model="expressForm.deliveryAddress"
					/>
				</uni-forms-item>
				<!-- 运输方式 -->
				<uni-forms-item :label="i18n.ctwfont5" :labelWidth="95" required name="conveyance" class="formItemBox">
					<radio-group @change="radioChange">
						<label v-for="(item, index) in radioList" :key="item.value">
							<view class="radioBox">
								<radio
									:value="item.value"
									:disabled="item.disabled"
									color="#80B2FF"
									:checked="item.value === expressForm.conveyance"
									style="transform:scale(0.7)"
								/>
								<view
									class="radioImg"
									:style="{ backgroundColor: item.value === expressForm.conveyance ? '#80B2FF' : '#fff', marginBottom: index === 0 ? '10px' : '' }"
								>
									<view class="radioyuanImg">
										<!-- :src="item.value === expressForm.conveyance ? item.url : item.url2" -->
										<image
											class="yuanimg"
											:style="{ opacity: item.value === expressForm.conveyance ? 1 : 0.6 }"
											mode="scaleToFill"
											:src="item.transportModeImage"
										></image>
									</view>
									<!-- <view class="radioyuanImgTitle" style="color: #DC355D;" v-if="item.disabled">{{ shutDown(expressForm.conveyance, item.value) }}</view> -->
									<view class="radioyuanImgTitle" style="color: #DC355D;" v-if="item.disabled">{{ item[transportModeDisabled] }}</view>

									<view class="radioyuanImgTitle" v-else>{{ item[transportText] }}</view>
								</view>
							</view>
						</label>
					</radio-group>
				</uni-forms-item>
				<!-- 预约日期 -->
				<uni-forms-item :label="i18n.ctwfont8" :labelWidth="95" name="deliveryTime" class="formItemBox">
					<!-- 					<uni-datetime-picker type="date" :value="expressForm.deliveryTime2" :start="new Date().getTime()" end="" > 
					<input
						type="text"
						class="classInput"
						disabled
						v-model="expressForm.deliveryTime2"
						:placeholder="i18n.ctwfont30"
						@tap="datetimePicker"
						@input="binddata('deliveryTime', $event.detail.value)"
					/>
					</uni-datetime-picker> -->
					<input
						type="text"
						class="classInput"
						disabled
						v-model="expressForm.deliveryTime2"
						:placeholder="i18n.ctwfont30"
						@tap="datetimePicker"
						@input="binddata('deliveryTime', $event.detail.value)"
					/>
					<xp-picker class="pickerBox" ref="datetimePicker" :year-range="yuYunTiem" @cancel="xpPickerCancel" @confirm="datetimeChange">
						<uni-icons color="#9e9fa0" type="arrowdown" size="16" />
					</xp-picker>
				</uni-forms-item>
				<!-- 小灰线 -->
				<view class="huiLine"></view>
				<!-- 目录信息 -->
				<view class="formTitleBox">{{ i18n.ctwfont9 }}</view>
				<!-- 货总数 -->
				<uni-forms-item :label="i18n.ctwfont10" :labelWidth="95" required name="goodsQuantity" class="formItemBox">
					<input
						type="number"
						class="classInput"
						v-model="expressForm.goodsQuantity"
						:placeholder="i18n.ctwfont11"
						@input="binddata('goodsQuantity', $event.detail.value)"
					/>
				</uni-forms-item>
				<!-- 包装要求 -->
				<uni-forms-item :label="i18n.ctwfont47" :labelWidth="95" class="formItemBox">
					<uni-data-checkbox multiple v-model="expressForm.packing" :localdata="packingList" />
				</uni-forms-item>

				<!-- 付款方式 -->
				<uni-forms-item :label="i18n.ctwfont12" :labelWidth="95" required name="paymentType" class="formItemBox">
					<view class="" style="width: 64%; position: relative;">
						<hpy-form-select
							:dataList="paymentColumns"
							:title="i18n.ctwfont46"
							text="text"
							:value="expressForm.paymentType"
							name="value"
							@change="paymentPickerChange"
							v-model="expressForm.paymentType"
						/>
					</view>
					<view style="color: red; font-size: $uni-font-size-custom-b; width: 64%;" v-if="assistanceShow">{{ i18n.ctwfont67 }}</view>
					<view class="cameraImg">
						<view class="cameraImgTap" @tap="addImgs">
							<image style="width: 20px; height: 20px;" src="/static/icon/OneDrive_5_11-16-2021/2x/upload_icon.png" mode="scaleToFill"></image>
							<view class="cameraImgText">
								{{ i18n.ctwfont18 }}
								<text style="color: #dd524d;">*</text>
							</view>
						</view>
						<view @tap="lookImg(1)" style="margin-top: 3px; color:#80b2ff; font-size: 16px;">
							<uni-icons style="vertical-align: middle;" color="#80b2ff" type="info" size="18"></uni-icons>
							{{ i18n.ctwfont65 }}
						</view>
					</view>
				</uni-forms-item>
				<view style="height: 55px;" v-if="expressForm.paymentType === '017004' || expressForm.paymentType === ''"></view>
				<!-- 货款总额 -->
				<uni-forms-item
					:label="i18n.ctwfont13"
					:labelWidth="95"
					name="paymentTotalAmount"
					required
					class="formItemBox"
					v-if="expressForm.paymentType !== '017004' && expressForm.paymentType !== ''"
				>
					<input
						type="number"
						class="classInput2"
						v-model="expressForm.paymentTotalAmount"
						:placeholder="i18n.ctwfont14"
						@input="binddata('paymentTotalAmount', $event.detail.value)"
					/>
				</uni-forms-item>
				<!-- 定金 -->
				<uni-forms-item
					:label="i18n.ctwfont15"
					:labelWidth="95"
					name="depositRemark"
					class="formItemBox"
					v-show="expressForm.paymentType !== '017004' && expressForm.paymentType !== ''"
				>
					<!-- :disabled="expressForm.paymentTotalAmount === '' ? true : false" -->
					<view style="display: flex; align-items: center;">
						<input
							type="number"
							:maxlength="4"
							:disabled="expressForm.paymentTotalAmount === '' ? true : false"
							@input="percentageInput"
							class="classInput4"
							v-model="percentage"
						/>
						<text>%</text>
						<input
							type="number"
							class="classInput3"
							v-model="expressForm.depositRemark"
							:placeholder="i18n.ctwfont16"
							@input="binddata('depositRemark', $event.detail.value)"
							@focus="getDepositRemarkFocus"
						/>
					</view>
				</uni-forms-item>
				<!-- 定金付款 -->
				<uni-forms-item
					:label="i18n.ctwfont70"
					:labelWidth="95"
					required
					name="depositPaymentWay"
					class="formItemBox"
					v-show="expressForm.depositRemark && Number(expressForm.depositRemark) != 0"
				>
					<view class="" style="width: 63%; position: relative;">
						<hpy-form-select
							:dataList="depositPaymentWayColumns"
							:title="i18n.ctwfont71"
							text="text"
							:value="expressForm.depositPaymentWay"
							name="value"
							@change="depositPaymentWayPickerChange"
							v-model="expressForm.depositPaymentWay"
						/>
					</view>
				</uni-forms-item>
				<!-- 期货 -->
				<uni-forms-item
					:label="i18n.ctwfont44"
					:labelWidth="95"
					name="number"
					required
					class="formItemBox"
					v-show="expressForm.paymentType !== '017004' && expressForm.paymentType === '017001'"
				>
					<input type="number" class="classInput2" v-model="expressForm.number" :placeholder="i18n.ctwfont45" @input="binddata('number', $event.detail.value)" />
				</uni-forms-item>
				<!-- 小灰线 -->
				<view class="huiLine"></view>
				<view class="formTitleBox">{{ i18n.ctwfont20 }}</view>
				<uni-forms-item :label="i18n.ctwfont21" :labelWidth="95" class="formItemBox">
					<input type="text" class="classInput" v-model="expressForm.supplier" :placeholder="i18n.ctwfont22" />
				</uni-forms-item>
				<uni-forms-item :label="i18n.ctwfont23" :labelWidth="95" name="supplierTel" required class="formItemBox">
					<input
						type="number"
						:maxlength="11"
						class="classInput"
						v-model="expressForm.supplierTel"
						:placeholder="i18n.ctwfont24"
						@input="binddata('supplierTel', $event.detail.value)"
					/>
				</uni-forms-item>
				<!-- 			<uni-forms-item :label="i18n.ctwfont31" :labelWidth="95" name="customerRemark" class="formItemBox">
					<uni-easyinput type="textarea" autoHeight v-model="expressForm.customerRemark" :placeholder="i18n.ctwfont25"></uni-easyinput>
				</uni-forms-item> -->
				<view class="bottomBox">
					<view class=""></view>
					<view class="bottomBoxR">
						<view class="title1">
							<image
								@tap="checkboxChange"
								style="width: 12px; height: 12px; margin-right: 5px; vertical-align: middle;"
								mode="scaleToFill"
								:src="radioFw ? '/static/icon/OneDrive_5_11-16-2021/2x/ic_choice02@2x.png' : '/static/icon/OneDrive_5_11-16-2021/2x/ic_choice01@2x.png'"
							></image>
							<text>{{ i18n.ctwfont37 }}</text>
							<text style="color: #80B2FF" @tap="agreementOk">{{ i18n.ctwfont38 }}</text>

							<text>{{ i18n.ctwfont39 }}</text>
						</view>
					</view>
				</view>
				<view class="submitBtn">
					<view style="opacity: 0;">{{ i18n.ctwfont27 }}</view>
					<button size="mini" @tap="FormSubmit" class="submitBtnR" type="default">{{ i18n.ctwfont28 }}</button>
				</view>
			</uni-forms>
		</view>
		<!-- 图片上传 -->
		<uni-popup ref="popup" :mask-click="false" type="center">
			<view class="popupBigBox">
				<uni-row :gutter="20">
					<uni-col :span="8" class="popupBoxItem">
						<view>
							<text style="font-size: $uni-font-size-custom-d;">
								{{ i18n.ctwfont40 }}
								<text style="color: #DD524D;">*</text>
							</text>
						</view>
					</uni-col>
					<uni-col :span="16" class="popupBoxItem">
						<view class="upImgBig" v-if="imgArr.length > 0">
							<view class="csImgBg" v-for="(item, index) in imgArr" :key="index">
								<image class="csImg" :src="item" alt="测试" @tap="yulan(item)"></image>
								<uni-icons class="scBtn" color="#ffffff" type="closeempty" size="16" @tap="deleImg(item)"></uni-icons>
							</view>
							<view class="tianjiaimg" @tap="addImgBtn" v-if="imgArr.length >= 10 ? false : true">
								<uni-icons class="addBtn" color="#fff" type="plusempty" size="30"></uni-icons>
								<!-- <text class="addTitletp">上传图片</text> -->
							</view>
						</view>
						<view style="display: flex;" v-else>
							<view class="upImgbigBox" @tap="addImgBtn">
								<!-- <uni-icons color="#fff" type="plusempty" size="30" /> -->
								<image style="width: 20px; height: 20px;" src="/static/icon/OneDrive_5_11-16-2021/2x/upload_icon.png" mode="scaleToFill"></image>
								<view style="margin-top: 10px; color: #fff; font-size: $uni-font-size-custom-d;">อัพโหลดรูป</view>
							</view>
							<view style="display: flex; flex-direction: column; justify-content: space-between;">
								<view></view>
								<view @tap="lookImg(1)" style="margin-left: 5px; color:#80b2ff; font-size: $uni-font-size-custom-d;">
									<uni-icons style="vertical-align: middle;" color="#80b2ff" type="info" size="16"></uni-icons>
									{{ i18n.ctwfont65 }}
								</view>
							</view>
						</view>
					</uni-col>
					<!-- 				<uni-col :span="8" class="popupBoxItem">
						<view>
							<text style="font-size: 14px;">
								{{ i18n.ctwfont10 }}
								<text style="color: #DD524D;">*</text>
							</text>
						</view>
					</uni-col>
					<uni-col :span="16" class="popupBoxItem">
						<view>
							<input type="text" class="upClassInput" v-model="expressForm.allNum" :placeholder="i18n.ctwfont10" @input="binddata('allNum', $event.detail.value)" />
						</view>
					</uni-col> -->
				</uni-row>
				<view class="huiLine"></view>
				<uni-row :gutter="40" style="margin-top: 20px;">
					<uni-col :span="8" class="popupBoxItem">
						<!-- 		<view class="beizhuBox">
							<view style="margin-bottom: 10px; font-size: 14px;">{{ i18n.ctwfont31 }}</view>
							<uni-easyinput type="textarea" v-model="expressForm.ImgRemarks" :placeholder="i18n.ctwfont25"></uni-easyinput>
						</view> -->
						<view>
							<text style="font-size: $uni-font-size-custom-d;">
								{{ i18n.ctwfont19 }}
								<!-- <text style="color: #DD524D;">*</text> -->
							</text>
						</view>
					</uni-col>
					<uni-col :span="16" class="popupBoxItem">
						<view class="upImgBig" v-if="imgArr2.length > 0">
							<view class="csImgBg" v-for="(item, index) in imgArr2" :key="index">
								<image class="csImg" :src="item" alt="测试" @tap="yulan2(item)"></image>
								<uni-icons class="scBtn" color="#ffffff" type="closeempty" size="16" @tap="deleImg2(item)"></uni-icons>
							</view>
							<view class="tianjiaimg" @tap="addImgBtn2" v-if="imgArr2.length >= 10 ? false : true">
								<uni-icons class="addBtn" color="#fff" type="plusempty" size="30"></uni-icons>
								<!-- <text class="addTitletp">上传图片</text> -->
							</view>
						</view>
						<view style="display: flex;" v-else>
							<view class="upImgbigBox" @tap="addImgBtn2">
								<!-- <uni-icons color="#fff" type="plusempty" size="30" /> -->
								<image style="width: 20px; height: 20px;" src="/static/icon/OneDrive_5_11-16-2021/2x/upload_icon.png" mode="scaleToFill"></image>
								<view style="margin-top: 10px; color: #ffffff; font-size: $uni-font-size-custom-d;">อัพโหลดรูป</view>
							</view>
							<view style="display: flex; flex-direction: column; justify-content: space-between;">
								<view></view>
								<view @tap="lookImg(2)" style="margin-left: 5px; color:#80b2ff; font-size: $uni-font-size-custom-d;">
									<uni-icons style="vertical-align: middle;" color="#80b2ff" type="info" size="16"></uni-icons>
									{{ i18n.ctwfont65 }}
								</view>
							</view>
						</view>
						<!-- 				<view class="upImgBig" v-if="pathArr.length > 0">
							<view class="csImgBg2" v-for="(item, index) in pathArr" :key="index">
								<view class="popupBoxItemFile">
									<view class="popupBoxItemFileName">{{ item.name }}</view>
								</view>
								<uni-icons class="scBtn2" color="#ffffff" type="closeempty" size="16" @tap="delepopupBoxItemFile(item)"></uni-icons>
							</view>
							<view class="tianjiaimg" @tap="upFileBtn" v-if="pathArr.length >= 10 ? false : true">
								<uni-icons class="addBtn" color="#666666" type="plusempty" size="30"></uni-icons>
							</view>
						</view>
						<view class="" v-else>
							<view class="upImgbigBox" @tap="upFileBtn">
								<uni-icons color="#424451" type="plusempty" size="30" />
								<view style="margin-top: 20px; font-size: 14px;">上传文件</view>
							</view>
						</view> -->
						<!-- 					<view @tap="upFileBtn" v-show="pathArr.length === 0">
							<view class="upImgbigBox" style="margin: 0 auto;">
								<uni-icons color="#424451" type="plusempty" size="30" />
								<view style="margin-top: 20px; font-size: 14px;">上传文件</view>
							</view>
						</view>
						<view class="" v-if="pathArr.length > 0">
							<view class="upImgbigBox2" style="margin: 0 auto;">
								<uni-icons class="scFileBtn" color="#ffffff" type="closeempty" size="18" @tap="delepopupBoxItemFile()"></uni-icons>
								<view class="popupBoxItemFile">
									<view class="popupBoxItemFileName">{{ pathArr[0].name }}</view>
									<view class="popupBoxItemFileSize">{{ pathArr[0].size }}MB</view>
								</view>
							</view>
						</view> -->
					</uni-col>
				</uni-row>
				<view class="upImgBottomBox">
					<button size="mini" @tap="offAddImgs" class="upImgBottomBoxL" type="default">{{ i18n.ctwfont27 }}</button>
					<button size="mini" @tap="offAddImgs2" class="upImgBottomBoxR" type="default">{{ i18n.ctwfont28 }}</button>
				</view>
			</view>
		</uni-popup>
		<!-- loading -->
		<loading-box ref="loading"></loading-box>
		<!-- 注册成功 -->
		<!-- 协议弹框 -->
		<uni-drawer ref="showRight" :width="windowWidth" mode="right" :mask-click="false">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				@clickLeft="closeDrawer2"
				color="#FDFDFD"
				:border="false"
				:shadow="false"
				background-color="#f1f1f1"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
			</uni-nav-bar>
			<scroll-view style="height: 89.6%;" scroll-y="true">
				<view style="overflow: scroll; padding: 0 20px;" v-html="agreementList.textWithoutPageBreak"></view>
				<button @tap="closeDrawer" type="default">Agree and close</button>
			</scroll-view>
		</uni-drawer>
		<uni-popup ref="mapsPopupOk" type="center" :animation="false" :maskClick="false">
			<view class="loginBox" @tap="goHomeBtn">
				<view class="imgBox"><image style="width: 100px; height: 50px; border-radius: 10px;" mode="scaleToFill" src="/static/icon/outLogo.png"></image></view>
				<view class="titleBox">{{ i18n.ctwfont29 }}</view>
			</view>
		</uni-popup>
		<!-- <nk-select-file v-model="show" ref="selectFile" @confirm="getPath"></nk-select-file> -->
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
		<lb-tabbar ref="tabbar" :value="$store.state.tabActive" :animate="$store.state.animate" :placeholder="true">
			<lb-tabbar-item
				v-for="item in $store.state.tabbars"
				:key="item.pagePath"
				:name="item.pagePath"
				:icon="item.iconPath"
				:selectedIconPath="item.selectedIconPath"
				:dot="item.dot"
				:info="item.info"
				:raisede="item.raisede"
				icon-prefix="iconfont"
				@click="handleTabbarItemClick"
			>
				{{ item.text }}
			</lb-tabbar-item>
		</lb-tabbar>
	</view>
</template>

<script>
import myTabbar from '@/components/stzhang-tab/stzhang-tab.vue';
import { picturUp } from '@/utils/pictureUp.js';
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import { getStorage } from '@/utils/setStorage.js';
import loadingBox from '@/pages/loadingBox/index.vue'; // loading效果
import { codeMapFun } from '@/utils/codeMap.js';
import baseFont from '@/utils/baseFont.js';
// tababr
import lbTabbar from '@/pages/lb-tabbar/lb-tabbar.vue';
import lbTabbarItem from '@/pages/lb-tabbar/lb-tabbar-item.vue';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			windowWidth: 0, // 手机宽
			back_k: 0,
			radioFw: false, // 同意用户规则
			popupShow: false, // 用于物理返回关图片上传
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			percentage: '', // 定金百分比
			expressForm: {
				customerCode: '', // 客户代号
				CustomerCodeTwo: '', // 第三客代号
				deliveryAddress: '', // 交货地点
				conveyance: '', // 运输方式
				// deliveryTime: this.formatDate(new Date()), // 交货日期 yyyy-mm-dd hh:mm:ss
				deliveryTime: '', // 交货日期 yyyy-mm-dd hh:mm:ss
				deliveryTime2: '', // 显示时间
				packing: [], // 包装
				goodsQuantity: '', // 商品总数量
				paymentType: '', // 付款方式
				depositRemark: '', // 定金备注，定金金额
				paymentTotalAmount: '', // 贷款总额
				number: '', // 期帐
				supplier: '', // 供应商名称
				supplierTel: '', // 供应商电话
				depositPaymentWay: '' // 定金付款方式
				// customerRemark: '' // 客户备注，物品信息备注
			},
			paymentTypeText: '', // 付款方式备注
			agreementList: '', // 用户协议
			agreementShow: false, // 用户协议
			langShow: true, // 切换语言时校验更新
			getCPStatusNum: {
				bkPaidStatus: 1,
				cpStatus: 1
			}, // 用户可用支付方式
			assistanceShow: false, // 付款方式显示
			show: false, // 打开文件上传
			pathArr: [], // 文件上传
			// 文件
			pathArrNum: 10,
			// 照片存放
			imgArr: [],
			// 照片默认10张
			imgNum: 10,
			// 照片存放
			imgArr2: [],
			// 照片默认10张
			imgNum2: 10,
			// 客户地址
			CustomerCode: [],
			// 第三客户地址
			CustomerCodeTwo: [],
			// 第三方是否显示
			CustomerCodeTwoShow: false,
			goSetTime: '', // 自动跳转
			deliveryText: 'nameTh', // 收货地址指定显示key
			// 收货地址
			columns: [],
			// 运输方式
			radioList: [
				{
					value: '01002',
					name: 0,
					disabled: false,
					text: '',
					url: '/static/icon/OneDrive_5_11-16-2021/2x/ic_car_s@2x.png',
					url2: '/static/icon/OneDrive_5_11-16-2021/2x/ic_car_u@2x.png'
				},
				{
					value: '01001',
					name: 1,
					disabled: false,
					text: '',
					url: '/static/icon/OneDrive_5_11-16-2021/2x/ic_ship_s@2x.png',
					url2: '/static/icon/OneDrive_5_11-16-2021/2x/ic_ship_u@2x.png'
				}
			],
			transportText: 'thaiName',
			transportModeDisabled: 'thaiTransportModeDisabled',
			// 是否动百分比
			isPaymentTotalAmount: true,
			// 预约时间
			yuYunTiem: [new Date().getFullYear(), new Date().getFullYear() + 2]
		};
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onShow() {
		const languageFlag = getStorage('language') || 'th';
		if (languageFlag === 'zh') {
			this.deliveryText = 'nameCn';
			this.transportText = 'chineseName';
			this.transportModeDisabled = 'chineseTransportModeDisabled';
		} else if (languageFlag === 'th') {
			this.deliveryText = 'nameTh';
			this.transportText = 'thaiName';
			this.transportModeDisabled = 'thaiTransportModeDisabled';
		} else {
			this.deliveryText = 'nameEn';
			this.transportText = 'englishName';
			this.transportModeDisabled = 'englishTransportModeDisabled';
		}
		this.getCustomerCode();
		// 获取送货地址
		this.getDelivery();
		// 获取运输方式
		this.getTransport();
		// 获取第三方客户代号
		this.getCustomerCodeTwo();
		// this.$nextTick(function(){
		// 	// 判断用户支付方式
		// 	this.getCPStatus();
		// })
	},
	onHide() {
		this.$refs.SetUpPopup.close();
		this.popupIsShow = false;
		this.$refs.signOutBox.close();
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.windowWidth = res.windowWidth;
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	destroyed() {
		if (this.$refs.popup) {
			this.$refs.popup.close();
		}
	},
	watch: {
		'expressForm.depositRemark'(val) {
			if (val && Number(val) != 0) {
				if (!this.isPaymentTotalAmount) {
					if (this.expressForm.paymentTotalAmount) {
						let num = this.priceFormat((Number(val) / this.expressForm.paymentTotalAmount) * 100);
						if (num > 99.9) {
							this.percentage = 99.9;
							// const num2 = 99.9 / 100;
							// this.expressForm.depositRemark = this.priceFormat(this.expressForm.paymentTotalAmount * num2);
						} else if (num < 0) {
							this.percentage = '';
						} else {
							this.percentage = num;
						}
					}
				}
				this.rules.depositPaymentWay = {
					rules: [{ required: true, errorMessage: this.$t('express').ctwfont71, trigger: 'blur' }]
				};
			} else {
				this.expressForm.depositPaymentWay = '';
				this.percentage = '';
				this.rules.depositPaymentWay = {
					rules: [{ required: false, errorMessage: this.$t('express').ctwfont71, trigger: 'blur' }]
				};
			}
		},
		'expressForm.paymentTotalAmount'(val) {
			if (val === '' || Number(val) == 0) {
				this.expressForm.depositRemark = '';
				this.percentage = '';
			} else {
				this.expressForm.depositRemark = this.priceFormat(this.expressForm.paymentTotalAmount * (this.percentage / 100))
					? this.priceFormat(this.expressForm.paymentTotalAmount * (this.percentage / 100))
					: '';
			}
		},
		percentage(val) {
			if (val) {
				if (val > 99.9) {
					this.percentage = 99.9;
				} else if (val < 0) {
					this.percentage = '';
				}
			}
		}
	},
	components: { myTabbar, setUpPages, signOut, loadingBox, lbTabbar, lbTabbarItem },
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 64; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('express');
		},
		// 支付方式-sqd
		paymentColumns() {
			let arr = [
				{
					text: this.$t('express.ctwfont32'),
					value: '017004',
					type: 1
				},
				{
					text: this.$t('express.ctwfont33'),
					value: '017002',
					type: 2
				},
				{
					text: this.$t('express.ctwfont34'),
					value: '017001',
					type: 3
				},
				{
					text: this.$t('express.ctwfont35'),
					value: '017002',
					type: 4
				}
			];
			this.assistanceShow = false;
			if (this.getCPStatusNum.cpStatus === 1 && this.getCPStatusNum.bkPaidStatus === 1) {
				arr = [
					{
						text: this.$t('express.ctwfont32'),
						value: '017004',
						type: 1
					},
					{
						text: this.$t('express.ctwfont33'),
						value: '017002',
						type: 2
					},
					{
						text: this.$t('express.ctwfont34'),
						value: '017001',
						type: 3
					},
					{
						text: this.$t('express.ctwfont35'),
						value: '017002',
						type: 4
					}
				];
			} else if (this.getCPStatusNum.cpStatus === 0 && this.getCPStatusNum.bkPaidStatus === 0) {
				this.assistanceShow = true;
				arr = [];
			} else if (this.getCPStatusNum.cpStatus === 1 && this.getCPStatusNum.bkPaidStatus === 0) {
				arr = [
					{
						text: this.$t('express.ctwfont32'),
						value: '017004',
						type: 1
					}
				];
			} else if (this.getCPStatusNum.cpStatus === 0 && this.getCPStatusNum.bkPaidStatus === 1) {
				arr = [
					{
						text: this.$t('express.ctwfont33'),
						value: '017002',
						type: 2
					},
					{
						text: this.$t('express.ctwfont34'),
						value: '017001',
						type: 3
					},
					{
						text: this.$t('express.ctwfont35'),
						value: '017002',
						type: 4
					}
				];
			}
			return arr;
		},
		// 包装
		packingList() {
			const packingListArr = [
				{ value: 0, text: this.$t('express.ctwfont49') },
				{ value: 1, text: this.$t('express.ctwfont48') },
				{ value: 2, text: this.$t('express.ctwfont50') }
			];
			return packingListArr;
		},
		depositPaymentWayColumns() {
			const columnsArr = [
				{
					text: this.$t('express.ctwfont72'),
					value: '21001'
				},
				{
					text: this.$t('express.ctwfont73'),
					value: '21002'
				}
			];
			return columnsArr;
		},
		// 停运提示
		shutDown() {
			return function(val, index) {
				if (val) {
					if (val != '01001') {
						return this.$t('express.ctwfont68');
					} else if (val != '01002') {
						return this.$t('express.ctwfont51');
					}
				} else {
					if (index === '01001') {
						return this.$t('express.ctwfont68');
					} else if (index === '01002') {
						return this.$t('express.ctwfont51');
					}
				}
			};
		},
		rules() {
			return {
				customerCode: {
					rules: [{ required: true, errorMessage: this.$t('express').ctwfont52, trigger: 'blur' }]
				},
				// 交货地点
				deliveryAddress: {
					rules: [{ required: true, errorMessage: this.$t('express').ctwfont53, trigger: 'blur' }]
				},
				conveyance: {
					rules: [{ required: true, errorMessage: this.$t('express').ctwfont69, trigger: 'blur' }]
				},
				// // 交货日期
				// deliveryTime: {
				// 	rules: [{ required: true, errorMessage: '请输入名称', trigger: 'blur' }]
				// },
				// 商品总数量
				goodsQuantity: {
					rules: [
						{ required: true, errorMessage: this.$t('express').ctwfont54, trigger: 'blur' },
						{
							validateFunction: this.goodsQuantityValidateFunction
						}
					]
				},
				// 付款方式
				paymentType: {
					rules: [{ required: true, errorMessage: this.$t('express').ctwfont55, trigger: 'blur' }]
				},
				// 贷款总额
				paymentTotalAmount: {
					rules: [
						{ required: false, errorMessage: this.$t('express').ctwfont56, trigger: 'blur' },
						{
							validateFunction: this.paymentTotalAmountValidateFunction
						}
					]
				},
				// 供应商名称
				// supplier: {
				// 	rules: [{ required: true, errorMessage: '请输入名称', trigger: 'blur' }]
				// },
				// 供应商电话
				supplierTel: {
					rules: [{ required: true, errorMessage: this.$t('express').ctwfont57, trigger: 'blur' }]
				},
				// 定金
				depositRemark: {
					rules: [
						{
							validateFunction: this.depositRemarkValidateFunction
						}
					]
				},
				// 期帐
				number: {
					rules: [
						{ required: false, errorMessage: this.$t('express').ctwfont66, trigger: 'blur' },
						{
							validateFunction: this.numberValidateFunction
						}
					]
				},
				// 定金付款方式
				depositPaymentWay: {
					rules: [{ required: false, errorMessage: this.$t('express').ctwfont71, trigger: 'blur' }]
				}
				// 客户备注
				// customerRemark: {
				// 	rules: [{ required: true, errorMessage: '请输入', trigger: 'blur' }]
				// }
			};
		}
	},
	methods: {
		handleTabbarItemClick(e) {
			const token = getStorage('token');
			if (token === undefined || token === null || token === '') {
				let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
				let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = '';
				for (let key in currentParam) {
					param += '?' + key + '=' + currentParam[key];
				}
				let localRoute = '/' + currentRoute + param;
				if (e.name == localRoute) {
					return false;
				} else {
					if (e.name === '/pages/businessCard/index' || e.name === '/pages/home/index') {
						// #ifdef APP-PLUS
						uni.redirectTo({
							url: e.name
						});
						// #endif
						// #ifdef H5
						this.$Router.push(e.name);
						// #endif
					} else {
						// #ifdef APP-PLUS
						uni.redirectTo({
							url: '/pages/home/index'
						});
						// #endif
						// #ifdef H5
						this.$Router.push('/pages/home/index');
						// #endif
					}
				}
			} else {
				// this.$store.state.tabActive = e.name;
				let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
				let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = '';
				for (let key in currentParam) {
					param += '?' + key + '=' + currentParam[key];
				}
				let localRoute = '/' + currentRoute + param;
				if (e.name == localRoute) {
					return false;
				} else {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: e.name
					});
					// #endif
					// #ifdef H5
					this.$Router.push(e.name);
					// #endif
				}
			}
		},
		// 上传图片预览
		lookImg(type) {
			let url = '/static/icon/OneDrive_5_11-16-2021/2x/pic_waybill@2x.png';
			if (type === 1) {
				url = '/static/icon/OneDrive_5_11-16-2021/2x/pic_waybill@2x.png';
			} else {
				url = '/static/icon/OneDrive_5_11-16-2021/2x/pic_waybill2@2x.jpg';
			}
			uni.previewImage({
				current: url,
				urls: [url],
				success: res => {
					console.log(res);
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		// 定金
		depositRemarkValidateFunction(rule, value, data, callback) {
			if (Number(value) >= Number(this.expressForm.paymentTotalAmount)) {
				// this.expressForm.depositRemark = this.expressForm.paymentTotalAmount - 1;
				callback(this.$t('express').ctwfont58);
			} else {
				if (value < 1) {
					this.$nextTick(function() {
						this.expressForm.depositRemark = '';
						this.percentage = '';
					});
				} else {
					this.expressForm.depositRemark = Number(value);
					// if (this.percentage) {
					// 	// this.expressForm.depositRemark = this.priceFormat(this.expressForm.paymentTotalAmount * (this.percentage / 100));
					// } else {
					// 	this.expressForm.depositRemark = Number(value);
					// }
				}
				return true;
			}
		},
		// 贷款总额
		paymentTotalAmountValidateFunction(rule, value, data, callback) {
			if (Number(value) <= Number(this.expressForm.depositRemark) && this.expressForm.depositRemark) {
				if (Number(value) < 1) {
					this.expressForm.depositRemark = '';
					this.percentage = '';
				} else {
					if (this.percentage) {
						this.expressForm.depositRemark = this.priceFormat(Number(value) * (this.percentage / 100));
					} else {
						callback(this.$t('express').ctwfont58);
					}
				}
			} else {
				this.isPaymentTotalAmount = true;
				this.expressForm.depositRemark ? this.$refs.form.setValue('depositRemark', this.expressForm.depositRemark) : '';
				if (value < 1) {
					this.$nextTick(function() {
						this.expressForm.paymentTotalAmount = '';
					});
				} else {
					this.expressForm.paymentTotalAmount = Number(value);
				}
				return true;
			}
		},
		// 总数量
		goodsQuantityValidateFunction(rule, value, data, callback) {
			if (value < 1) {
				this.$nextTick(function() {
					this.expressForm.goodsQuantity = '';
				});
			} else {
				this.expressForm.goodsQuantity = Number(value);
			}
		},
		// 期站
		numberValidateFunction(rule, value, data, callback) {
			if (Number(value) > 50) {
				callback(this.$t('express').ctwfont59);
			} else {
				if (value < 1) {
					this.$nextTick(function() {
						this.expressForm.number = '';
					});
				} else {
					this.expressForm.number = Number(value);
				}
				return true;
			}
		},
		// 地址
		bindPickerChange(e) {
			this.$refs.form.setValue('deliveryAddress', e.value.e3Number);
			this.expressForm.deliveryAddress = e.value.e3Number;
		},
		// 客户地址
		CustomerCodeChange(e) {
			this.$refs.form.setValue('customerCode', e.value.value);
			this.expressForm.customerCode = e.value.value;
			this.getCustomerCodeTwo();
			this.getCPStatus();
		},
		// 第三方客户代号
		CustomerCodeTwoChange(e) {
			this.expressForm.CustomerCodeTwo = e.value.value;
		},
		depositPaymentWayPickerChange(e) {
			this.$refs.form.setValue('depositPaymentWay', e.value.value);
			this.expressForm.depositPaymentWay = e.value.value;
		},
		// 付款方式
		paymentPickerChange(e) {
			this.$refs.form.setValue('paymentType', e.value.value);
			if (e.value.type == 1) {
				this.paymentTypeText = 'C/P';
				this.rules.paymentTotalAmount = {
					rules: [
						{ required: false, errorMessage: this.$t('express').ctwfont56, trigger: 'blur' },
						{
							validateFunction: this.paymentTotalAmountValidateFunction
						}
					]
				};
			} else if (e.value.type == 2) {
				this.paymentTypeText = 'Urgent transfer';
				this.rules.paymentTotalAmount = {
					rules: [
						{ required: true, errorMessage: this.$t('express').ctwfont56, trigger: 'blur' },
						{
							validateFunction: this.paymentTotalAmountValidateFunction
						}
					]
				};
				this.rules.number = {
					rules: [
						{ required: false, errorMessage: this.$t('express').ctwfont66, trigger: 'blur' },
						{
							validateFunction: this.numberValidateFunction
						}
					]
				};
			} else if (e.value.type == 3) {
				this.paymentTypeText = 'Credit Control';
				this.rules.paymentTotalAmount = {
					rules: [
						{ required: true, errorMessage: this.$t('express').ctwfont56, trigger: 'blur' },
						{
							validateFunction: this.paymentTotalAmountValidateFunction
						}
					]
				};
				this.rules.number = {
					rules: [
						{ required: true, errorMessage: this.$t('express').ctwfont66, trigger: 'blur' },
						{
							validateFunction: this.numberValidateFunction
						}
					]
				};
			} else {
				this.paymentTypeText = 'Transfer before supplier delivery';
				this.rules.paymentTotalAmount = {
					rules: [
						{ required: true, errorMessage: this.$t('express').ctwfont56, trigger: 'blur' },
						{
							validateFunction: this.paymentTotalAmountValidateFunction
						}
					]
				};
				this.rules.number = {
					rules: [
						{ required: false, errorMessage: this.$t('express').ctwfont66, trigger: 'blur' },
						{
							validateFunction: this.numberValidateFunction
						}
					]
				};
			}
			this.expressForm.paymentType = e.value.value;
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		// 时间选择open
		datetimePicker() {
			this.$refs.datetimePicker.show();
		},
		// 获取支付方式
		async getCPStatus() {
			const user = JSON.parse(getStorage('userconter'));
			const params = {
				customerCode: this.expressForm.customerCode || user.customerCode
			};
			const { data: res } = await this.$http(true, 'api/E3/getCPStatus', params, 'GET');
			if (res.errno === 0) {
				this.getCPStatusNum = res.data;
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 获取客代号数据
		async getCustomerCode() {
			const user = JSON.parse(getStorage('userconter'));
			const params = {
				customerCode: user.customerCode
			};
			const jurisdiction = getStorage('jurisdiction');
			let obj = '';
			let type = 'api/E3/shippingAddress';
			if (jurisdiction) {
				obj = JSON.parse(jurisdiction);
				if (obj) {
					type = obj.onlineOrder == 0 ? 'api/E3/shippingAddress' : 'api/E3/mainShippingAddress';
				}
				if (type == 'api/E3/mainShippingAddress') {
					params.functionCode = 'ONLINE_ORDER';
				}
			}
			const { data: res } = await this.$http(true, type, params, 'GET');
			if (res.errno === 0) {
				if (res.data.length > 0) {
					const arr = [];
					res.data.forEach(item => {
						if (typeof item != 'string') {
							const obj = {
								text: item.customerCode,
								value: item.customerCode
							};
							arr.push(obj);
						} else {
							const obj = {
								text: item,
								value: item
							};
							arr.push(obj);
						}
					});
					if (this.expressForm.customerCode === '') {
						this.expressForm.customerCode = arr[0].value;
						this.$refs.form.setValue('customerCode', arr[0].value);
					}
					this.CustomerCode = arr;
				} else {
					this.CustomerCode = [
						{
							text: user.customerCode,
							value: user.customerCode
						}
					];
					this.expressForm.customerCode = user.customerCode;
					this.$refs.form.setValue('customerCode', user.customerCode);
				}
				// 获取支付方式
				this.getCPStatus();
			} else {
				// 获取支付方式
				this.getCPStatus();
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 获取第三方客代号数据
		async getCustomerCodeTwo() {
			const jurisdiction = getStorage('jurisdiction');
			this.expressForm.CustomerCodeTwo = '';
			if (jurisdiction) {
				let obj = JSON.parse(jurisdiction);
				if (obj) {
					if (obj.onlineOrder == 2) {
						const user = JSON.parse(getStorage('userconter'));
						const params = {
							customerCode: this.expressForm.customerCode || user.customerCode
						};
						const { data: res } = await this.$http(true, 'api/E3/thirdShippingAddress', params, 'GET');
						if (res.errno === 0) {
							this.CustomerCodeTwoShow = true;
							if (res.data.length > 0) {
								const arr = [];
								res.data.forEach(item => {
									const obj = {
										text: item.customerCode,
										value: item.customerCode
									};
									arr.push(obj);
								});
								this.CustomerCodeTwo = arr;
							} else {
								this.CustomerCodeTwo = [];
							}
						} else {
							this.CustomerCodeTwoShow = false;
							const err = codeMapFun().find(item => item[res.errno]);
							if (err) {
								uni.showToast({
									title: err[res.errno],
									icon: 'none',
									position: 'top'
								});
							} else {
								uni.showToast({
									title: res.errmsg,
									icon: 'none',
									position: 'top'
								});
							}
						}
					} else {
						this.CustomerCodeTwo = [];
						this.CustomerCodeTwoShow = false;
						this.expressForm.CustomerCodeTwo = '';
					}
				}
			}
		},
		// 时间选择
		datetimeChange(e) {
			// this.$refs.form.setValue('deliveryTime', e.value);
			this.expressForm.deliveryTime = e.value;
			this.expressForm.deliveryTime2 = this.formatDate2(e.timestamp);
		},
		xpPickerCancel(e) {
			this.expressForm.deliveryTime = '';
			this.expressForm.deliveryTime2 = '';
		},
		// 时间处理
		formatDate(value) {
			const dt = new Date(value);
			const y = dt.getFullYear();
			const m = (dt.getMonth() + 1 + '').padStart(2, 0);
			const d = (dt.getDate() + '').padStart(2, 0);
			return `${y}-${m}-${d}`;
		},
		// 时间处理
		formatDate2(value) {
			const dt = new Date(value);
			const y = dt.getFullYear();
			const m = (dt.getMonth() + 1 + '').padStart(2, 0);
			const d = (dt.getDate() + '').padStart(2, 0);
			return `${d}-${m}-${y}`;
		},
		// 物流方式
		radioChange(e) {
			this.$refs.form.setValue('conveyance', e.detail.value);
			this.expressForm.conveyance = e.detail.value;
		},
		checkboxChange(e) {
			this.radioFw = !this.radioFw;
		},
		// 协议弹框
		async agreementOk() {
			const lang = getStorage('language') || 'th';
			let text = '';
			if (lang === 'zh') {
				text = 'Terms_of_purchase_and_cancellation_of_purchase_orders_chinese';
			} else if (lang === 'en') {
				text = 'Terms_of_purchase_and_cancellation_of_purchase_orders_english';
			} else {
				text = 'Terms_of_purchase_and_cancellation_of_purchase_orders_thai';
			}
			const params = {
				number: text,
				isPage: '1',
				limit: '4',
				page: '1',
				isShowDetail: '1'
			};
			const { data: res } = await this.$http(true, 'api/info/infoList', params, 'GET');
			if (res.errno === 0) {
				this.agreementShow = true;
				this.$refs.showRight.open();
				this.agreementList = res.data.list[0];
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 关闭协议弹框
		closeDrawer() {
			this.radioFw = true;
			this.agreementShow = false;
			this.$refs.showRight.close();
		},
		closeDrawer2() {
			this.agreementShow = false;
			this.$refs.showRight.close();
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				if (this.show) {
					this.$refs.selectFile.backAddress();
				} else if (this.popupShow) {
					this.offAddImgs();
				} else if (this.popupIsShow) {
					this.$refs.SetUpPopup.close();
					this.popupIsShow = false;
				} else if (this.signOutShow) {
					this.$refs.signOutBox.close();
					this.signOutShow = false;
				} else if (this.agreementShow) {
					this.agreementShow = false;
					uni.showTabBar();
					this.$refs.showRight.close();
				} else {
					let main = plus.android.runtimeMainActivity();
					if (this.back_k > 0) {
						this.back_k = 0;
						return main.moveTaskToBack(false);
					} else {
						const pages = getCurrentPages();
						if (pages.length === 1) {
							this.back_k++;
							setTimeout(() => {
								this.back_k--;
							}, 1000);
							// uni.showToast({
							// 	title: '再按一次退出应用',
							// 	icon: 'none',
							// 	duration: 1000
							// });
						}
					}
				}
			}
		},
		// 添加图片
		addImgs() {
			this.$refs.popup.open();
			this.popupShow = true;
		},
		offAddImgs() {
			this.imgArr = []; // 图片置空
			this.imgNum = 10;
			this.imgArr2 = []; // 图片置空
			this.imgNum2 = 10;
			this.$refs.popup.close();
			this.popupShow = false;
		},
		offAddImgs2() {
			this.$refs.popup.close();
			this.popupShow = false;
		},
		// 调取手机相册
		addImgBtn() {
			const taht = this;
			if (this.imgNum === 0) {
				return uni.showToast({
					title: this.$t('express').ctwfont60,
					icon: 'none',
					position: 'top'
				});
			} else {
				uni.chooseImage({
					count: taht.imgNum, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: async function(res) {
						let sizeMax = 0;
						res.tempFiles.forEach(item => {
							sizeMax += item.size;
						});
						let videoSize = sizeMax / (1024 * 1024); // 转成M格式
						videoSize = videoSize.toFixed(1); // 保留小数点后一位
						if (videoSize > 50) {
							return uni.showToast({
								title: this.$t('express').ctwfont61,
								icon: 'none',
								position: 'top'
							});
						} else {
							const urlArr = res.tempFiles;
							let imgUrl = '';
							let newimg = '';
							urlArr.forEach(async (item, index) => {
								let imgSize = item.size / (1024 * 1024); // 转成M格式
								imgSize = imgSize.toFixed(1); // 保留小数点后一位
								if (imgSize >= 5) {
									return uni.showToast({
										// title: `${index + 1}${this.$t('express').ctwfont62}`,
										title: `${this.$t('express').ctwfont62}`,
										icon: 'none',
										position: 'top'
									});
								} else {
									imgUrl = await picturUp('api/order/upload/checklist', item.path, '');
									taht.imgArr.push(imgUrl[0]);
									taht.imgNum = taht.imgNum - 1;
									if (taht.imgNum < 0) {
										taht.imgNum = 0;
									}
								}
							});
						}
					}
				});
			}
		},
		// 预览
		yulan(url) {
			if (url) {
				uni.previewImage({
					current: url,
					urls: this.imgArr,
					success: res => {
						console.log(res);
					},
					fail: err => {
						console.log(err);
					}
				});
				// void plus.nativeUI.previewImage([url]); // 预览
			}
		},
		// 删除图片
		deleImg(url) {
			const index = this.imgArr.findIndex(item => item === url);
			this.imgArr.splice(index, 1);
			this.imgNum += 1;
		},
		// 调取手机相册2
		addImgBtn2() {
			const taht = this;
			if (this.imgNum2 === 0) {
				return uni.showToast({
					title: this.$t('express').ctwfont60,
					icon: 'none',
					position: 'top'
				});
			} else {
				uni.chooseImage({
					count: taht.imgNum2, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: async function(res) {
						let sizeMax = 0;
						res.tempFiles.forEach(item => {
							sizeMax += item.size;
						});
						let videoSize = sizeMax / (1024 * 1024); // 转成M格式
						videoSize = videoSize.toFixed(1); // 保留小数点后一位
						if (videoSize > 50) {
							return uni.showToast({
								title: this.$t('express').ctwfont61,
								icon: 'none',
								position: 'top'
							});
						} else {
							const urlArr = res.tempFiles;
							let imgUrl = '';
							let newimg = '';
							urlArr.forEach(async (item, index) => {
								let imgSize = item.size / (1024 * 1024); // 转成M格式
								imgSize = imgSize.toFixed(1); // 保留小数点后一位
								if (imgSize >= 5) {
									return uni.showToast({
										title: `${this.$t('express').ctwfont62}`,
										icon: 'none',
										position: 'top'
									});
								} else {
									imgUrl = await picturUp('api/order/upload/checklist', item.path, '');
									taht.imgArr2.push(imgUrl[0]);
									taht.imgNum2 = taht.imgNum2 - 1;
									if (taht.imgNum2 < 0) {
										taht.imgNum2 = 0;
									}
								}
							});
						}
					}
				});
			}
		},
		// 预览
		yulan2(url) {
			if (url) {
				uni.previewImage({
					current: url,
					urls: this.imgArr2,
					success: res => {
						console.log(res);
					},
					fail: err => {
						console.log(err);
					}
				});
				// void plus.nativeUI.previewImage([url]); // 预览
			}
		},
		// 删除图片
		deleImg2(url) {
			const index = this.imgArr2.findIndex(item => item === url);
			this.imgArr2.splice(index, 1);
			this.imgNum2 += 1;
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			this.langShow = false;
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
			const languageFlag = getStorage('language') || 'th';
			if (languageFlag === 'zh') {
				this.deliveryText = 'nameCn';
				this.transportText = 'chineseName';
				this.transportModeDisabled = 'chineseTransportModeDisabled';
			} else if (languageFlag === 'th') {
				this.deliveryText = 'nameTh';
				this.transportText = 'thaiName';
				this.transportModeDisabled = 'thaiTransportModeDisabled';
			} else {
				this.deliveryText = 'nameEn';
				this.transportText = 'englishName';
				this.transportModeDisabled = 'englishTransportModeDisabled';
			}
			this.$nextTick(function() {
				this.langShow = true;
				this.erificationOptimization();
			});
		},
		// 提交
		FormSubmit() {
			this.$refs.form
				.submit()
				.then(async val => {
					if (!this.radioFw) {
						return uni.showToast({
							title: this.$t('express').ctwfont64,
							icon: 'none',
							position: 'top'
						});
					} else if (this.imgArr.length <= 0) {
						return uni.showToast({
							title: this.$t('express').ctwfont63,
							icon: 'none',
							position: 'top'
						});
					} else {
						this.$refs.loading.open();
						const {
							customerCode,
							CustomerCodeTwo,
							deliveryAddress,
							conveyance,
							deliveryTime,
							packing,
							goodsQuantity,
							paymentType,
							depositRemark,
							paymentTotalAmount,
							number,
							supplier,
							supplierTel,
							depositPaymentWay
						} = this.expressForm;
						// customerRemark
						const user = JSON.parse(getStorage('userconter'));
						let package1 = 0;
						let package2 = 0;
						let package3 = 0;
						// 处理包装
						if (packing && packing.length > 0) {
							packing.forEach(item => {
								if (item === 0) {
									package2 = 1;
								} else if (item === 1) {
									package1 = 1;
								} else {
									package3 = 1;
								}
							});
						} else {
							package2 = 1;
						}
						let newDepositPaymentWay = '';
						if (depositPaymentWay === '21001') {
							newDepositPaymentWay = 'Customer directly pay to supplier C/P';
						} else if (depositPaymentWay === '21002') {
							newDepositPaymentWay = 'Customer pay to supplier through CTW';
						} else {
							newDepositPaymentWay = '';
						}
						// const parr = [];
						// this.pathArr.forEach(urls => {
						// 	parr.push(urls.url);
						// });
						const params = {
							createCustomerCode: user.customerCode,
							customerCode: customerCode || user.customerCode,
							thirdCustomerCode: CustomerCodeTwo,
							deliveryAddress,
							conveyance,
							deliveryTime,
							goodsQuantity,
							paymentType,
							depositRemark,
							paymentTotalAmount,
							payRemark: this.paymentTypeText,
							number,
							supplier,
							supplierTel,
							package1,
							package2,
							package3,
							supplierPic: this.imgArr.join(','), // 文件上传
							goodsPic: this.imgArr2.join(','), // 图片
							depositPaymentWay: newDepositPaymentWay
						};
						const { data: res } = await this.$http(true, 'api/order/addOrder', params, 'POST');
						this.$refs.loading.close();
						if (res.errno === 0) {
							this.$refs.mapsPopupOk.open();
							this.resetFrom();
							this.goSetTime = setTimeout(() => {
								this.$refs.mapsPopupOk.close();
								// #ifdef APP-PLUS
								uni.redirectTo({
									url: '/pages/maps/index'
								});
								// #endif
								// #ifdef H5
								this.$Router.push('/pages/maps/index');
								// #endif
							}, 2000);
						} else {
							const err = codeMapFun().find(item => item[res.errno]);
							if (err) {
								uni.showToast({
									title: err[res.errno],
									icon: 'none',
									position: 'top'
								});
							} else {
								uni.showToast({
									title: res.errmsg,
									icon: 'none',
									position: 'top'
								});
							}
						}
					}
				})
				.catch(err => {
					uni.showToast({
						title: 'Please fill in the correct information',
						icon: 'none',
						position: 'top'
					});
				});
		},
		// 切换后校验优化
		erificationOptimization() {
			setTimeout(() => {
				if (this.expressForm.depositRemark && Number(this.expressForm.depositRemark) != 0) {
					this.rules.depositPaymentWay = {
						rules: [{ required: true, errorMessage: this.$t('express').ctwfont71, trigger: 'blur' }]
					};
				} else {
					this.rules.depositPaymentWay = {
						rules: [{ required: false, errorMessage: this.$t('express').ctwfont71, trigger: 'blur' }]
					};
				}
				this.expressForm.customerCode ? this.$refs.form.setValue('customerCode', this.expressForm.customerCode) : '';
				this.expressForm.deliveryAddress ? this.$refs.form.setValue('deliveryAddress', this.expressForm.deliveryAddress) : '';
				this.expressForm.goodsQuantity ? this.$refs.form.setValue('goodsQuantity', this.expressForm.goodsQuantity) : '';
				this.expressForm.paymentType ? this.$refs.form.setValue('paymentType', this.expressForm.paymentType) : '';
				this.expressForm.paymentTotalAmount ? this.$refs.form.setValue('paymentTotalAmount', this.expressForm.paymentTotalAmount) : '';
				this.expressForm.supplierTel ? this.$refs.form.setValue('supplierTel', this.expressForm.supplierTel) : '';
				this.expressForm.depositRemark ? this.$refs.form.setValue('depositRemark', this.expressForm.depositRemark) : '';
				this.expressForm.number ? this.$refs.form.setValue('number', this.expressForm.number) : '';
				this.expressForm.conveyance ? this.$refs.form.setValue('conveyance', this.expressForm.conveyance) : '';
				this.expressForm.depositPaymentWay ? this.$refs.form.setValue('depositPaymentWay', this.expressForm.depositPaymentWay) : '';
			}, 200);
		},
		// 重置
		resetFrom() {
			this.$refs.form.setValue('paymentTotalAmount', '');
			this.$refs.form.resetFields(); // 重置校验
			// this.pathArr = []; // 文件置空
			// this.pathArrNum = 10;
			this.imgArr = []; // 图片置空
			this.imgNum = 10;
			this.imgArr2 = []; // 图片置空
			this.imgNum2 = 10;
			this.radioFw = false; // 同意用户规则
			this.expressForm = {
				customerCode: '', // 客户代号
				CustomerCodeTwo: '',
				deliveryAddress: '', // 交货地点
				conveyance: '', // 运输方式
				deliveryTime: '', // 交货日期 yyyy-mm-dd hh:mm:ss
				deliveryTime2: '',
				packing: [], // 包装
				goodsQuantity: '', // 商品总数量
				paymentType: '', // 付款方式
				depositRemark: '', // 定金备注，定金金额
				paymentTotalAmount: '', // 付款方式备注 付款方式名称
				number: '', // 期帐
				supplier: '', // 供应商名称
				supplierTel: '', // 供应商电话
				depositPaymentWay: '' // 定金付款方式
				// customerRemark: '' // 客户备注，物品信息备注
			};
			this.paymentTypeText = ''; // 付款方式备注
			this.getTransport();
		},
		// 关闭下单成功弹框
		goHomeBtn() {
			// 关闭自动跳转
			clearTimeout(this.goSetTime);
			this.$refs.mapsPopupOk.close();
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/maps/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/maps/index');
			// #endif
		},
		// 获取送货地址
		async getDelivery() {
			const { data: res } = await this.$http(true, 'api/storehouse/list', '', 'GET');
			if (res.errno === 0) {
				const arr = [];
				if (res.data) {
					res.data.forEach(item => {
						if (Number(item.status) === 1) {
							arr.push(item);
						}
					});
				}
				// setTimeout(() => {
				// 	const ter = JSON.stringify(arr);
				// 	const reg = new RegExp(this.deliveryText, 'g');
				// 	const ter2 = ter.replace(reg, 'text');
				// 	const ter3 = JSON.parse(ter2);
				// 	this.columns = ter3;
				// }, 200);
				this.columns = arr;
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 获取运输方式
		async getTransport() {
			const { data: res } = await this.$http(true, 'api/transportMode/list', '', 'GET');
			if (res.errno === 0) {
				// const arr = [];
				if (res.data) {
					const ter = JSON.stringify(res.data);
					const ter2 = ter.replace(/e3Number/g, 'value');
					const ter3 = JSON.parse(ter2);
					ter3.forEach(item => {
						if (item.value === '01001') {
							item.url = '/static/icon/OneDrive_5_11-16-2021/2x/ic_ship_s@2x.png';
							item.url2 = '/static/icon/OneDrive_5_11-16-2021/2x/ic_ship_u@2x.png';
							item.shutDown = this.$t('express.ctwfont68');
						} else {
							item.url = '/static/icon/OneDrive_5_11-16-2021/2x/ic_car_s@2x.png';
							item.url2 = '/static/icon/OneDrive_5_11-16-2021/2x/ic_car_u@2x.png';
							item.shutDown = this.$t('express.ctwfont51');
						}
						if (Number(item.status) === 1) {
							item.disabled = false;
						} else {
							item.disabled = true;
						}
					});
					this.radioList = ter3;
					if (!this.expressForm.conveyance) {
						const isok = this.radioList.filter(item2 => item2.disabled != true);
						if (isok.length > 0) {
							this.expressForm.conveyance = isok[0].value;
							this.$refs.form.setValue('conveyance', isok[0].value);
						} else {
							this.expressForm.conveyance = '';
							// this.$refs.form.setValue('conveyance', '')
						}
					}
				}
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 定金百分比
		percentageInput(e) {
			if (this.expressForm.paymentTotalAmount) {
				if (e.detail.value) {
					if (e.detail.value > 99.9) {
						this.percentage = 99.9;
						const num2 = 99.9 / 100;
						this.expressForm.depositRemark = this.priceFormat(this.expressForm.paymentTotalAmount * num2);
					} else if (e.detail.value < 0) {
						this.percentage = '';
					} else {
						const num = e.detail.value / 100;
						// Math.floor(this.expressForm.paymentTotalAmount * num);
						// (this.expressForm.paymentTotalAmount * num).toFixed(0);
						this.expressForm.depositRemark = this.priceFormat(this.expressForm.paymentTotalAmount * num);
					}
				} else {
					this.expressForm.depositRemark = '';
				}
			} else {
				uni.showToast({
					title: '请先输入货款总额',
					icon: 'none',
					position: 'top'
				});
			}
		},
		// 获取定金标识
		getDepositRemarkFocus() {
			this.isPaymentTotalAmount = false;
		},
		// 判断是否为小数
		priceFormat(num) {
			if (!isNaN(num)) {
				return (num + '').indexOf('.') !== -1 ? num.toFixed(2) : num;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-forms--top {
	padding: 0;
}
::v-deep .select-picker {
	line-height: 30px;
}
::v-deep uni-checkbox .uni-checkbox-input {
	border-radius: 50%;
}
::v-deep .uni-easyinput__content-textarea {
	height: 56px;
	min-height: 56px;
}
::v-deep .uni-forms-item__label {
	height: 30px;
}

::v-deep .uni-forms-item__content {
	min-height: 30px;
}
::v-deep .uni-forms-item__label {
	font-size: $uni-font-size-custom-b;
}
::v-deep .uni-error-message {
	width: 80%;
}
::v-deep .uni-error-message {
	bottom: -18px;
	line-height: 10px;
}
// ::v-deep .uni-date__x-input {
// 	line-height: 30px;
// 	height: 30px;
// }
// 顶部部分
.status_bar {
	height: var(--status-bar-height);
	background-color: #f1f1f1;
	width: 100%;
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #cd001b;
		width: 100%;
	}
}
.huiLine {
	border-top: 2px solid #ebebeb;
	margin: 0 auto;
}
.loginBox {
	width: 700rpx;
	height: 150px;
	border-radius: 10px;
	background-color: #cd001b;
	.imgBox {
		display: flex;
		justify-content: center;
		padding: 20px 20px 15px 20px;
	}
	.titleBox {
		text-align: center;
		color: #ebedf3;
	}
}
.zhuti {
	padding: 0 15px;
	box-sizing: border-box;
	.titleBox {
		margin-bottom: 5px;
		display: flex;
		justify-content: center;
		.titleBoxcenter {
			width: 100%;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			text-align: center;
			background-color: #f2f2f2;
		}
	}

	.formTitleBox {
		font-size: $uni-font-size-custom-d;
		font-weight: 700;
		color: #333;
		margin: 10px 0;
	}
	.formItemBox {
		margin-left: 20px;
		.classInput {
			position: relative;
			border: 1px solid #e8e8e8;
			border-radius: 5px;
			padding: 4px 10px;
			font-size: $uni-font-size-custom-d;
		}
		.classInput2 {
			width: 55%;
			border: 1px solid #e8e8e8;
			border-radius: 5px;
			padding: 4px 10px;
			font-size: $uni-font-size-custom-d;
		}
		.classInput3 {
			width: 39%;
			border: 1px solid #e8e8e8;
			border-radius: 5px;
			padding: 4px 6px;
			font-size: $uni-font-size-custom-d;
			margin-left: 5px;
		}
		.classInput4 {
			width: 15%;
			border: 1px solid #e8e8e8;
			border-radius: 5px;
			padding: 4px 5px;
			font-size: $uni-font-size-custom-d;
			margin-right: 3px;
		}
		.pickerSelectBox {
			height: 30px;
			line-height: 30px;
		}
		.pickerBox {
			position: absolute;
			top: 8px;
			right: 10px;
		}
		.cameraImg {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 10;
			.cameraImgTap {
				width: 150rpx;
				height: 150rpx;
				padding: 0 10px;
				box-sizing: border-box;
				background-color: #80b2ff;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				.cameraImgText {
					color: #fff;
					font-size: $uni-font-size-custom-b;
					text-align: center;
					margin-top: 5px;
				}
			}
		}
		.radioBox {
			display: flex;
			align-items: center;
			.radioImg {
				width: 100%;
				height: 40px;
				border-radius: 5px;
				border: 1px solid #f0f0f0;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				.radioyuanImg {
					width: 35px;
					height: 35px;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 5px;
					flex: 1;
					// padding: 2px;
					// box-shadow: 0 1px 5px 1px #ccc;
					// box-sizing: border-box;
					// margin: 0 10px;
					// background-color: #fff;
					.yuanimg {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.radioyuanImgTitle {
					font-size: $uni-font-size-custom-b;
					flex: 5;
				}
			}
			// .radioImg:nth-child(1) {
			// 	margin-bottom: 10px;
			// }
		}
	}
	.bottomBox {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		.bottomBoxR {
			display: flex;
			justify-content: flex-end;
			width: 250px;
			.title1 {
				text-align: right;
				// width: 200px;
			}
		}
	}
	.submitBtn {
		padding: 20px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.submitBtnR {
			background-color: #cd001b;
			padding: 0 20px;
			border-radius: 5px;
			color: #ffffff;
			line-height: 2;
			margin: 0;
		}
	}
}
.popupBigBox {
	width: 700rpx;
	// height: 400px;
	padding: 20px;
	box-sizing: border-box;
	box-shadow: 2px 2px 5px 5px #939393;
	background-color: #fff;
	.popupBoxItem {
		margin-bottom: 20px;
		.upImgbigBox {
			width: 100px;
			height: 100px;
			border: 2px solid #efefef;
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #80b2ff;
		}
		// .upImgbigBox2 {
		// 	position: relative;
		// 	// width: 100px;
		// 	height: 100px;
		// 	border: 2px solid #efefef;
		// 	border-radius: 5px;
		// 	display: flex;
		// 	justify-content: center;
		// 	align-items: center;
		// 	.scFileBtn {
		// 		background-color: #f56c6c;
		// 		border-radius: 50%;
		// 		// border-bottom-left-radius: 65%;
		// 		width: 19px;
		// 		height: 19px;
		// 		line-height: 19px;
		// 		position: absolute;
		// 		top: 0px;
		// 		right: 0px;
		// 	}
		// 	.popupBoxItemFile {
		// 		.popupBoxItemFileName {
		// 			font-size: 10px;
		// 			color: #07c160;
		// 			margin-bottom: 5px;
		// 			overflow: hidden;
		// 			text-overflow: ellipsis;
		// 			display: -webkit-box;
		// 			-webkit-line-clamp: 1; //多行在这里修改数字即可
		// 			overflow: hidden;
		// 			-webkit-box-orient: vertical;
		// 		}
		// 		.popupBoxItemFileSize {
		// 			text-align: center;
		// 			fonts-size: 14px;
		// 			color: #ccc;
		// 		}
		// 	}
		// }
		.upClassInput {
			width: 105px;
			border: 1px solid #ececec;
			padding: 3px 10px;
			box-sizing: border-box;
			border-radius: 5px;
			font-size: $uni-font-size-custom-d;
			height: 32px;
			line-height: 32px;
		}
		.beizhuBox {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
	.upImgBottomBox {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		.upImgBottomBoxL {
			background-color: #cbcbcb;
			padding: 0 20px;
			border-radius: 5px;
			color: #ffffff;
			line-height: 2;
			margin: 0;
		}
		.upImgBottomBoxR {
			background-color: #cd001b;
			padding: 0 20px;
			border-radius: 5px;
			color: #ffffff;
			line-height: 2;
			margin: 0;
		}
	}
}
.upImgBig {
	display: flex;
	flex-wrap: wrap;
	.csImgBg {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		// border: 1px solid #007aff;
		border-radius: 2px;
		margin-right: 10px;
		margin-bottom: 10px;
		// overflow: hidden;
		.csImg {
			border-radius: 2px;
			width: 100%;
			height: 100%;
		}
		.scBtn {
			background-color: #f56c6c;
			border-radius: 50%;
			// border-bottom-left-radius: 65%;
			width: 15px;
			height: 15px;
			line-height: 15px;
			position: absolute;
			top: 0px;
			right: 0px;
		}
	}
	.csImgBg2 {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		border: 1px solid #cbcbcb;
		border-radius: 2px;
		margin-right: 10px;
		margin-bottom: 10px;
		// overflow: hidden;
		.popupBoxItemFile {
			border-radius: 2px;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.popupBoxItemFileName {
				font-size: $uni-font-size-custom-a;
				margin-top: 10px;
				text-align: center;
				color: #333;
				margin-bottom: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2; //多行在这里修改数字即可
				overflow: hidden;
				-webkit-box-orient: vertical;
			}
		}
		.scBtn2 {
			background-color: #f56c6c;
			border-radius: 50%;
			// border-bottom-left-radius: 65%;
			width: 15px;
			height: 15px;
			line-height: 15px;
			position: absolute;
			top: 0px;
			right: 0px;
		}
	}
}

.tianjiaimg {
	position: relative;
	width: 100rpx;
	height: 100rpx;
	border-radius: 2px;
	background-color: #80b2ff;
	border: 1px solid #fff;
	.addBtn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.addTitletp {
		position: absolute;
		left: 40%;
		bottom: 15%;
		transform: translateX(-35%);
		font-size: $uni-font-size-custom-a;
		color: #666666;
	}
}
</style>
